<!-- 切换栏 -->
<template>
  <div class="myswiper">
    <!-- 标题 -->
    <ul class="list">
      <li v-for="(item, i) in title" :key="item + i" 
        :class="i === index ? 'currentL' : '' "
        @click="clickLi(i)">
        {{item}}
      </li>
    </ul>
    <!-- 切换体 -->
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <ul class="swiper-slide">
          <li>你好组件的差距</li>
          <li>差距</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
        <ul class="swiper-slide">
          <li>222</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
        <ul class="swiper-slide">
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  props: ['title'],
  data () {
    return {
      swiperOption: {
        initialSlide: 0,
        on: {
          slideChangeTransitionStart: function() {
            console.log('移动了');
          },
        }
      },
      index: 0,
    }
  },
  methods: {
    // 点击标题
    clickLi(i) {
      this.index = i;
      this.mySwiper.slideTo(i, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~/assets/style/global.scss';

.myswiper {
  // 标题
  .list {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    li {
      position: relative;
      display: flex;
      &::after {
        position: absolute;
        bottom: -.05rem;
        content: "";
        display: block;
        width: 100%;
        height: .06rem;
        background-color: transparent;
        transition: all 1s ease;
      }
    }
    li.currentL {
      &::after {
        background-color: $orange;
      }
    }
  }
  // 切换体
  .swiper-wrapper {
    ul {
      li {
        height: 35px;
      }
    }
  }
}
</style>